/**
 * 教师管理页面JavaScript - 测试用例管理系统
 * 
 * 本文件提供了教师管理页面的完整交互功能，包括问题库管理、测试用例管理、
 * 数据展示、用户交互等核心功能。采用现代JavaScript技术，提供流畅的用户体验。
 * 
 * 主要功能：
 * - 问题库管理：查看、搜索、筛选、分页显示问题
 * - 测试用例管理：创建、编辑、删除、批量操作测试用例
 * - 模态框交互：问题详情查看、测试用例编辑
 * - 数据可视化：统计信息展示、分页控件
 * - 用户反馈：成功/错误消息提示
 * - 响应式设计：适配不同屏幕尺寸
 * 
 * 技术特点：
 * - 异步数据加载：使用fetch API进行HTTP请求
 * - 前端分页：提高大数据量显示性能
 * - 实时搜索：支持问题描述模糊搜索
 * - 批量操作：支持多选和批量删除
 * - 模态框管理：自定义模态框实现，不依赖Bootstrap
 * - 错误处理：完善的异常处理和用户提示
 * - 性能优化：延迟加载、超时控制、缓存策略
 * 
 * 页面结构：
 * - 问题库表格：显示问题列表，支持分页和搜索
 * - 统计面板：显示问题数量、测试用例数量等统计信息
 * - 操作按钮：新建、编辑、删除、批量操作等
 * - 模态框：问题详情查看、测试用例编辑
 * - 分页控件：支持页码跳转和页面大小调整
 * 
 * API接口：
 * - GET /api/problems：获取问题列表
 * - GET /api/test-cases：获取测试用例列表
 * - POST /api/test-cases：创建测试用例
 * - PUT /api/test-cases/{id}：更新测试用例
 * - DELETE /api/test-cases/{id}：删除测试用例
 * - DELETE /api/problems/{id}：删除问题
 * 
 * 使用场景：
 * - 教师管理测试用例库
 * - 问题分类和筛选
 * - 测试用例的增删改查
 * - 批量操作和导入导出
 * 
 * 依赖关系：
 * - HTML：teacher.html页面结构
 * - CSS：teacher.css样式文件
 * - API：后端RESTful接口
 * - Font Awesome：图标库
 */

// ==================== 全局变量定义 ====================

/**
 * 全局状态变量
 * 用于管理页面的状态和数据
 */
let selectedProblemIds = [];        // 选中的问题ID数组，用于批量操作
let problemLibrary = [];            // 问题库数据，存储所有问题信息
let currentResult = null;           // 当前分析结果，用于存储最新的分析数据

/**
 * 前端分页相关变量
 * 用于管理数据的分页显示
 */
let currentPage = 1;                // 当前页码，从1开始
let itemsPerPage = 10;             // 每页显示的问题数量
let totalPages = 1;                // 总页数
let filteredProblems = [];         // 过滤后的问题数组，用于搜索和筛选

// ==================== 工具函数 ====================

/**
 * HTML转义函数，防止XSS攻击
 * 
 * 将用户输入的文本进行HTML转义，防止恶意脚本注入。
 * 这是Web安全的重要措施，确保用户输入的内容不会被执行为HTML代码。
 * 
 * @param {string} text - 需要转义的文本
 * @returns {string} 转义后的HTML安全文本
 * 
 * 使用示例:
 *   const userInput = '<script>alert("XSS")</script>';
 *   const safeText = escapeHtml(userInput);
 *   // 结果: '&lt;script&gt;alert("XSS")&lt;/script&gt;'
 */
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

/**
 * 显示错误消息
 * 
 * 在页面右上角显示错误提示消息，使用Bootstrap样式。
 * 消息会自动在5秒后消失，用户也可以手动关闭。
 * 
 * @param {string} message - 错误消息内容
 * 
 * 功能特点:
 * - 固定位置显示，不影响页面布局
 * - 自动消失机制，避免页面堆积
 * - 支持手动关闭
 * - 使用Bootstrap样式，美观统一
 */
function showError(message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = 'alert alert-danger alert-dismissible fade show position-fixed';
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    document.body.appendChild(alertDiv);
    
    // 5秒后自动移除
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.parentNode.removeChild(alertDiv);
        }
    }, 5000);
}

/**
 * 显示成功消息
 * 
 * 在页面右上角显示成功提示消息，使用Bootstrap样式。
 * 消息会自动在3秒后消失，用户也可以手动关闭。
 * 
 * @param {string} message - 成功消息内容
 * 
 * 功能特点:
 * - 固定位置显示，不影响页面布局
 * - 自动消失机制，避免页面堆积
 * - 支持手动关闭
 * - 使用Bootstrap样式，美观统一
 */
function showSuccess(message) {
    // 创建临时提示
    const alertDiv = document.createElement('div');
    alertDiv.className = 'alert alert-success alert-dismissible fade show position-fixed';
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    document.body.appendChild(alertDiv);
    
    // 3秒后自动移除
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.parentNode.removeChild(alertDiv);
        }
    }, 3000);
}

// ==================== 统计和状态管理 ====================

/**
 * 更新统计信息
 * 
 * 从API获取最新的统计数据并更新页面显示。
 * 包括测试用例总数和问题总数等关键指标。
 * 
 * 功能:
 * - 异步获取测试用例统计
 * - 更新问题库统计
 * - 错误处理和降级显示
 * 
 * 更新内容:
 * - 总测试用例数量
 * - 问题库总数
 */
function updateStats() {
    // 更新总测试用例数量（从测试用例API获取）
    fetch('/api/test-cases?created_by=teacher&limit=1000')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('totalTestCases').textContent = data.test_cases.length;
            }
        })
        .catch(error => {
            console.error('获取测试用例统计失败:', error);
            document.getElementById('totalTestCases').textContent = '0';
        });
    
    // 更新问题数量
    document.getElementById('totalSets').textContent = problemLibrary.length;
}

// ==================== 模态框管理 ====================

/**
 * 关闭模态框
 * 
 * 关闭当前打开的模态框，清理相关状态和DOM元素。
 * 使用降级方案确保在不依赖Bootstrap的情况下也能正常工作。
 */
function closeModal() {
    const modalElement = document.getElementById('problemDetailModal');
    if (modalElement) {
        // 直接使用降级方案，不依赖Bootstrap
        hideModalFallback(modalElement);
    }
}

/**
 * 隐藏模态框的降级方案
 * 
 * 当Bootstrap不可用时，使用原生JavaScript实现模态框的隐藏功能。
 * 确保模态框能够正确关闭并恢复页面状态。
 * 
 * @param {HTMLElement} modalElement - 模态框DOM元素
 */
function hideModalFallback(modalElement) {
    modalElement.style.display = 'none';
    modalElement.classList.remove('show');
    document.body.classList.remove('modal-open');
    
    // 恢复背景页面滚动
    document.body.style.overflow = '';
    
    const backdrop = document.getElementById('modalBackdrop');
    if (backdrop) {
        backdrop.remove();
    }
}

// 在模态框中编辑测试用例
function editTestCaseInModal(testCaseId) {
    // 获取测试用例数据
    const testCaseRow = document.querySelector(`button[onclick="editTestCaseInModal(${testCaseId})"]`).closest('tr');
    const testType = testCaseRow.cells[0].textContent.trim();
    const inputData = testCaseRow.cells[1].textContent.trim();
    const expectedOutput = testCaseRow.cells[2].textContent.trim();
    const difficulty = testCaseRow.cells[3].textContent.trim();
    
    // 创建编辑表单
    const editForm = `
        <tr id="editRow${testCaseId}">
            <td>
                <select class="form-select form-select-sm">
                    <option value="normal" ${testType === 'normal' ? 'selected' : ''}>正常测试</option>
                    <option value="edge" ${testType === 'edge' ? 'selected' : ''}>边界测试</option>
                    <option value="error" ${testType === 'error' ? 'selected' : ''}>错误测试</option>
                    <option value="random" ${testType === 'random' ? 'selected' : ''}>随机测试</option>
                </select>
            </td>
            <td>
                <input type="text" class="form-control form-control-sm" value="${inputData}">
            </td>
            <td>
                <input type="text" class="form-control form-control-sm" value="${expectedOutput}">
            </td>
            <td>
                <select class="form-select form-select-sm">
                    <option value="easy" ${difficulty === 'easy' ? 'selected' : ''}>简单</option>
                    <option value="medium" ${difficulty === 'medium' ? 'selected' : ''}>中等</option>
                    <option value="hard" ${difficulty === 'hard' ? 'selected' : ''}>困难</option>
                </select>
            </td>
            <td>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-success" onclick="saveTestCaseInModal(${testCaseId})" title="保存">
                        <i class="fas fa-save"></i>
                    </button>
                    <button class="btn btn-secondary" onclick="cancelEditTestCaseInModal(${testCaseId})" title="取消">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </td>
        </tr>
    `;
    
    // 替换当前行
    testCaseRow.outerHTML = editForm;
}

// 在模态框中删除测试用例
async function deleteTestCaseInModal(testCaseId, problemId) {
    if (!confirm('确定要删除这个测试用例吗？')) {
        return;
    }
    
    try {
        const response = await fetch(`/api/test-cases/${testCaseId}`, {
            method: 'DELETE'
        });
        
        const data = await response.json();
        
        if (data.success) {
            showSuccess('测试用例删除成功');
            // 重新加载测试用例列表
            loadTestCasesForProblem(problemId);
        } else {
            showError('删除失败: ' + data.error);
        }
    } catch (error) {
        showError('请求失败: ' + error.message);
    }
}

// 为问题创建测试用例
function createTestCaseForProblem(problemId) {
    // 关闭当前模态框
    const modal = document.getElementById('problemDetailModal');
    if (modal) {
        // 直接使用降级方案，不依赖Bootstrap
        hideModalFallback(modal);
    }
    
    // 跳转到新建测试用例页面，并传递问题ID
    window.location.href = `/new-test-case?problem_id=${problemId}`;
}


// ==================== 页面初始化 ====================

/**
 * 页面加载完成后初始化
 * 
 * DOMContentLoaded事件处理器，负责页面的初始化工作。
 * 采用分阶段加载策略，优先显示关键内容，然后加载非关键资源。
 * 
 * 初始化流程:
 * 1. 立即显示关键内容（页面头部、功能卡片）
 * 2. 初始化导航栏滚动效果
 * 3. 延迟加载非关键资源（事件监听器、数据）
 * 
 * 性能优化:
 * - 关键内容优先显示
 * - 非关键资源延迟加载
 * - 避免阻塞页面渲染
 */
document.addEventListener('DOMContentLoaded', function() {
    // 立即显示关键内容
    showCriticalContent();
    
    // 初始化导航栏滚动效果
    initializeNavbarScroll();
    
    // 延迟加载非关键资源
    setTimeout(() => {
        initializeEventListeners();
        loadInitialData();
    }, 50);
});

/**
 * 导航栏滚动效果初始化
 * 
 * 为导航栏添加滚动时的样式变化效果。
 * 当页面滚动超过50px时，导航栏会添加"scrolled"类。
 * 
 * 功能特点:
 * - 响应式滚动效果
 * - 平滑的视觉过渡
 * - 性能优化的滚动监听
 */
function initializeNavbarScroll() {
    const navbar = document.querySelector('.navbar-modern');
    if (!navbar) return;

    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });
}

/**
 * 立即显示关键内容
 * 
 * 在页面加载时立即显示关键的用户界面元素。
 * 确保用户能够快速看到页面的主要功能。
 * 
 * 显示内容:
 * - 页面头部
 * - 核心功能卡片
 * - 加载占位符
 */
function showCriticalContent() {
    // 显示页面头部和核心功能卡片
    const criticalElements = document.querySelectorAll('.teacher-header, .feature-cards');
    criticalElements.forEach(el => {
        el.style.opacity = '1';
        el.style.transform = 'translateY(0)';
    });
    
    // 显示加载占位符
    showLoadingPlaceholders();
}

/**
 * 显示加载占位符
 * 
 * 在数据加载期间显示友好的加载提示。
 * 提供视觉反馈，让用户知道系统正在工作。
 */
function showLoadingPlaceholders() {
    // 问题库加载占位符
    const problemLibraryElement = document.getElementById('problemLibrary');
    if (problemLibraryElement) {
        problemLibraryElement.innerHTML = `
        <div class="loading-placeholder">
            <div class="text-center py-4">
                <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                    <p class="text-muted mt-2">正在加载问题库...</p>
            </div>
        </div>
    `;
    }
}

// ==================== 事件监听器初始化 ====================

/**
 * 初始化事件监听器
 * 
 * 为页面上的各种交互元素绑定事件处理器。
 * 包括按钮点击、表单提交、选择操作等。
 * 
 * 绑定的事件:
 * - 快速操作按钮（创建、导入）
 * - 筛选功能按钮
 * - 测试用例操作（全选、删除选中）
 * - 快速操作（复用、编辑、复制、删除）
 */
function initializeEventListeners() {
    // 快速操作按钮
    const createBtn = document.getElementById('createNewTestCase');
    const importBtn = document.getElementById('importTestCases');
    
    if (createBtn) createBtn.addEventListener('click', createNewTestCase);
    if (importBtn) importBtn.addEventListener('click', importTestCases);
    
    // 筛选功能
    const filterBtn = document.getElementById('filterTestCases');
    if (filterBtn) filterBtn.addEventListener('click', filterTestCases);
    
    // 测试用例操作
    const selectAllBtn = document.getElementById('selectAll');
    const deleteSelectedBtn = document.getElementById('deleteSelected');
    if (selectAllBtn) selectAllBtn.addEventListener('click', selectAllTestCases);
    if (deleteSelectedBtn) deleteSelectedBtn.addEventListener('click', deleteSelectedTestCases);
    
    // 快速操作
    const reuseBtn = document.getElementById('reuseTestCase');
    const editBtn = document.getElementById('editTestCase');
    const duplicateBtn = document.getElementById('duplicateTestCase');
    const deleteBtn = document.getElementById('deleteTestCase');
    
    if (reuseBtn) reuseBtn.addEventListener('click', reuseTestCase);
    if (editBtn) editBtn.addEventListener('click', editTestCase);
    if (duplicateBtn) duplicateBtn.addEventListener('click', duplicateTestCase);
    if (deleteBtn) deleteBtn.addEventListener('click', deleteTestCase);
}

// ==================== 数据加载 ====================

/**
 * 加载初始数据
 * 
 * 页面初始化时加载必要的数据。
 * 使用并行加载策略提高加载速度，并提供完善的错误处理。
 * 
 * 加载内容:
 * - 问题库数据
 * - 统计信息
 * 
 * 错误处理:
 * - 网络请求失败
 * - 数据解析错误
 * - 超时处理
 */
async function loadInitialData() {
    try {
        // 并行加载数据，提高速度
        const [libraryResult] = await Promise.allSettled([
            loadProblemLibrary()
        ]);
        
        // 处理加载结果
        if (libraryResult.status === 'rejected') {
            console.error('加载问题库失败:', libraryResult.reason);
            showError('加载问题库失败');
        }
        
        updateStats();
    } catch (error) {
        console.error('初始化数据加载失败:', error);
        showError('数据加载失败，请刷新页面重试');
    }
}

/**
 * 加载问题库
 * 
 * 从API获取问题库数据并更新页面显示。
 * 包含超时控制、错误处理和用户反馈。
 * 
 * 功能特点:
 * - 10秒超时控制
 * - 缓存控制（禁用缓存）
 * - 数据排序（按创建时间降序）
 * - 分页计算
 * - 错误状态显示
 * 
 * API参数:
 * - created_by=teacher: 只获取教师创建的问题
 * - limit=100: 限制返回数量
 * 
 * 错误处理:
 * - 网络超时
 * - HTTP错误
 * - 数据解析错误
 */
async function loadProblemLibrary() {
    try {
        // 添加超时控制
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10秒超时
        
        const response = await fetch('/api/problems?created_by=teacher&limit=100', {
            signal: controller.signal,
            headers: {
                'Cache-Control': 'no-cache',
                'Pragma': 'no-cache'
            }
        });
        
        clearTimeout(timeoutId);
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const data = await response.json();
        
        if (data.success) {
            console.log('API response success:', data);
            problemLibrary = data.problems || [];
            console.log('Loaded problems:', problemLibrary.length);
            
            // 按创建时间降序排列（最新的在前）
            problemLibrary.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
            
            // 初始化过滤数据
            filteredProblems = [...problemLibrary];
            console.log('Filtered problems:', filteredProblems.length);
            
            // 计算总页数
            totalPages = Math.ceil(filteredProblems.length / itemsPerPage);
            currentPage = 1; // 重置到第一页
            
            console.log('Total pages:', totalPages, 'Items per page:', itemsPerPage);
            
            displayProblemLibrary();
            updatePaginationControls();
        } else {
            throw new Error(data.error || '未知错误');
        }
    } catch (error) {
        if (error.name === 'AbortError') {
            console.error('请求超时');
            showError('请求超时，请检查网络连接');
        } else {
            console.error('加载问题库失败:', error);
            showError('加载问题库失败: ' + error.message);
        }
        
        // 显示空状态
        document.getElementById('problemLibrary').innerHTML = `
            <div class="empty-state">
                <i class="fas fa-exclamation-triangle"></i>
                <h5>加载失败</h5>
                <p>无法加载问题库，请检查网络连接或刷新页面重试</p>
                <button class="btn btn-primary" onclick="loadProblemLibrary()">
                    <i class="fas fa-refresh me-2"></i>重新加载
                </button>
            </div>
        `;
    }
}

// ==================== UI显示和交互 ====================

/**
 * 显示问题库（表格形式 + 前端分页）
 * 
 * 将问题库数据以表格形式显示，支持前端分页。
 * 包含问题描述、类型、测试用例数量、创建时间等信息。
 * 
 * 功能特点:
 * - 响应式表格设计
 * - 前端分页显示
 * - 复选框选择
 * - 操作按钮
 * - 空状态处理
 * 
 * 表格列:
 * - 选择框
 * - 问题描述（截断显示）
 * - 问题类型（徽章显示）
 * - 测试用例数量
 * - 创建时间
 * - 操作按钮
 */
function displayProblemLibrary() {
    console.log('displayProblemLibrary called');
    console.log('filteredProblems length:', filteredProblems.length);
    console.log('problemLibrary length:', problemLibrary.length);
    
    const container = document.getElementById('problemLibrary');
    if (!container) {
        console.error('problemLibrary container not found');
        return;
    }
    
    if (filteredProblems.length === 0) {
        console.log('No problems to display');
        container.innerHTML = `
            <div class="empty-state">
                <i class="fas fa-inbox"></i>
                <h5>暂无问题</h5>
                <p>点击"新建问题"开始创建</p>
            </div>
        `;
        return;
    }

    // 计算当前页的问题
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const currentPageProblems = filteredProblems.slice(startIndex, endIndex);

    // 创建表格HTML
    let tableHTML = `
        <div class="table-responsive">
            <div class="table-header">
                <i class="fas fa-database"></i>
                <span>问题库管理</span>
            </div>
            <table class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th width="60">
                            <input type="checkbox" id="selectAllCheckbox" class="form-check-input">
                        </th>
                        <th width="400">问题描述</th>
                        <th width="180">问题类型</th>
                        <th width="140">测试用例数量</th>
                        <th width="200">创建时间</th>
                        <th width="220">操作</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    currentPageProblems.forEach(problem => {
        const createdDate = new Date(problem.created_at).toLocaleDateString();
        const createdTime = new Date(problem.created_at).toLocaleTimeString();
        
        tableHTML += `
            <tr data-id="${problem.id}">
                <td>
                    <input type="checkbox" class="form-check-input problem-checkbox" value="${problem.id}">
                </td>
                <td>
                    <div class="fw-bold text-truncate" style="max-width: 280px;" title="${escapeHtml(problem.description)}">
                        ${escapeHtml(problem.description)}
                    </div>
                </td>
                <td>
                    <span class="badge bg-primary">${escapeHtml(problem.problem_type || 'unknown')}</span>
                </td>
                <td>
                    <span class="badge bg-info">${problem.test_case_count || 0} 个</span>
                </td>
                <td>
                        <small class="text-muted">
                        <div>${createdDate}</div>
                        <div>${createdTime}</div>
                        </small>
                </td>
                <td>
                    <div class="d-flex gap-1">
                        <button class="btn btn-sm btn-outline-primary" onclick="viewProblemDetails(${problem.id})" title="查看/编辑详情">
                            <i class="fas fa-eye me-1"></i>查看/编辑
                            </button>
                        <button class="btn btn-sm btn-outline-danger" onclick="deleteProblem(${problem.id})" title="删除">
                            <i class="fas fa-trash me-1"></i>删除
                            </button>
                        </div>
                </td>
            </tr>
        `;
    });
    
    tableHTML += `
                </tbody>
            </table>
                    </div>
    `;
    
    container.innerHTML = tableHTML;
    
    // 绑定全选事件
    document.getElementById('selectAllCheckbox').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.problem-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        updateSelectedProblems();
    });
    
    // 绑定单个选择事件
    document.querySelectorAll('.problem-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', updateSelectedProblems);
    });
}

/**
 * 更新选中的问题
 * 
 * 当用户选择或取消选择问题时，更新全局状态。
 * 同时更新相关按钮的可用状态。
 */
function updateSelectedProblems() {
    selectedProblemIds = Array.from(document.querySelectorAll('.problem-checkbox:checked'))
        .map(checkbox => parseInt(checkbox.value));
    
    // 更新按钮状态（如果有相关按钮的话）
    const deleteSelectedBtn = document.getElementById('deleteSelected');
    if (deleteSelectedBtn) {
        deleteSelectedBtn.disabled = selectedProblemIds.length === 0;
    }
}

// ==================== 分页和搜索功能 ====================

/**
 * 更新分页控件
 * 
 * 根据当前数据量和页面设置生成分页控件。
 * 支持页码跳转、上一页/下一页、省略号显示等。
 * 
 * 功能特点:
 * - 智能页码显示（当前页前后2页）
 * - 省略号处理
 * - 禁用状态处理
 * - 页码信息显示
 * 
 * 控件元素:
 * - 上一页按钮
 * - 页码按钮
 * - 省略号
 * - 下一页按钮
 * - 记录信息
 */
function updatePaginationControls() {
    const paginationContainer = document.getElementById('paginationControls');
    if (!paginationContainer) return;
    
    if (totalPages <= 1) {
        paginationContainer.innerHTML = '';
        return;
    }
    
    let paginationHTML = `
        <div class="d-flex justify-content-between align-items-center">
            <div class="pagination-info">
                <span class="text-muted">
                    显示第 ${(currentPage - 1) * itemsPerPage + 1} - ${Math.min(currentPage * itemsPerPage, filteredProblems.length)} 条，
                    共 ${filteredProblems.length} 条记录
                </span>
                </div>
            <nav aria-label="测试用例分页">
                <ul class="pagination pagination-sm mb-0">
    `;
    
    // 上一页按钮
    if (currentPage > 1) {
        paginationHTML += `
            <li class="page-item">
                <a class="page-link" href="#" onclick="goToPage(${currentPage - 1}); return false;">
                    <i class="fas fa-chevron-left"></i>
                </a>
            </li>
        `;
    } else {
        paginationHTML += `
            <li class="page-item disabled">
                <span class="page-link">
                    <i class="fas fa-chevron-left"></i>
                </span>
            </li>
        `;
    }
    
    // 页码按钮
    const startPage = Math.max(1, currentPage - 2);
    const endPage = Math.min(totalPages, currentPage + 2);
    
    if (startPage > 1) {
        paginationHTML += `
            <li class="page-item">
                <a class="page-link" href="#" onclick="goToPage(1); return false;">1</a>
            </li>
        `;
        if (startPage > 2) {
            paginationHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
        }
    }
    
    for (let i = startPage; i <= endPage; i++) {
        if (i === currentPage) {
            paginationHTML += `
                <li class="page-item active">
                    <span class="page-link">${i}</span>
                </li>
            `;
        } else {
            paginationHTML += `
                <li class="page-item">
                    <a class="page-link" href="#" onclick="goToPage(${i}); return false;">${i}</a>
                </li>
            `;
        }
    }
    
    if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
            paginationHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
        }
        paginationHTML += `
            <li class="page-item">
                <a class="page-link" href="#" onclick="goToPage(${totalPages}); return false;">${totalPages}</a>
            </li>
        `;
    }
    
    // 下一页按钮
    if (currentPage < totalPages) {
        paginationHTML += `
            <li class="page-item">
                <a class="page-link" href="#" onclick="goToPage(${currentPage + 1}); return false;">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </li>
        `;
    } else {
        paginationHTML += `
            <li class="page-item disabled">
                <span class="page-link">
                    <i class="fas fa-chevron-right"></i>
                </span>
            </li>
        `;
    }
    
    paginationHTML += `
                </ul>
            </nav>
            </div>
        `;
        
    paginationContainer.innerHTML = paginationHTML;
}

/**
 * 跳转到指定页面
 * 
 * 处理分页控件的页面跳转请求。
 * 验证页面范围并更新显示。
 * 
 * @param {number} page - 目标页码
 */
function goToPage(page) {
    if (page >= 1 && page <= totalPages) {
        currentPage = page;
        displayProblemLibrary();
        updatePaginationControls();
    }
}

/**
 * 执行搜索功能
 * 
 * 根据搜索框内容过滤问题库数据。
 * 支持问题描述的模糊搜索。
 * 
 * 搜索逻辑:
 * - 空搜索词：显示所有问题
 * - 非空搜索词：按问题描述过滤
 * - 重置到第一页
 * - 重新计算分页
 */
function performSearch() {
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        const searchQuery = searchInput.value.trim().toLowerCase();
        
        if (searchQuery === '') {
            // 如果没有搜索词，显示所有问题
            filteredProblems = [...problemLibrary];
        } else {
            // 根据问题描述进行搜索
            filteredProblems = problemLibrary.filter(problem => 
                problem.description.toLowerCase().includes(searchQuery)
            );
        }
        
        // 重新计算分页
        totalPages = Math.ceil(filteredProblems.length / itemsPerPage);
        currentPage = 1; // 重置到第一页
        
        displayProblemLibrary();
        updatePaginationControls();
    }
}

/**
 * 应用过滤器
 * 
 * 根据筛选条件过滤问题库数据。
 * 支持问题类型和搜索的组合过滤。
 * 
 * 过滤条件:
 * - 问题类型过滤
 * - 搜索文本过滤
 * - 组合过滤
 */
function applyFilters() {
    const problemTypeFilter = document.getElementById('problemTypeFilter');
    
    let filtered = [...problemLibrary];
    
    // 应用问题类型过滤
    if (problemTypeFilter && problemTypeFilter.value) {
        filtered = filtered.filter(problem => problem.problem_type === problemTypeFilter.value);
    }
    
    // 应用搜索过滤（如果搜索框有内容）
    const searchInput = document.getElementById('searchInput');
    if (searchInput && searchInput.value.trim()) {
        const searchQuery = searchInput.value.trim().toLowerCase();
        filtered = filtered.filter(problem => 
            problem.description.toLowerCase().includes(searchQuery)
        );
    }
    
    filteredProblems = filtered;
    
    // 重新计算分页
    totalPages = Math.ceil(filteredProblems.length / itemsPerPage);
    currentPage = 1; // 重置到第一页
    
    displayProblemLibrary();
    updatePaginationControls();
}

/**
 * 清除过滤器
 * 
 * 重置所有筛选条件，显示完整的问题库。
 * 清空搜索框和类型筛选器。
 */
function clearFilters() {
    // 重置表单
    const searchInput = document.getElementById('searchInput');
    const problemTypeFilter = document.getElementById('problemTypeFilter');
    
    if (searchInput) searchInput.value = '';
    if (problemTypeFilter) problemTypeFilter.value = '';
    
    // 重置过滤数据
    filteredProblems = [...problemLibrary];
    
    // 重新计算分页
    totalPages = Math.ceil(filteredProblems.length / itemsPerPage);
    currentPage = 1;
    
    displayProblemLibrary();
    updatePaginationControls();
}

// 查看问题详情
function viewProblemDetails(problemId) {
    // 找到对应的问题
    const problem = problemLibrary.find(p => p.id === problemId);
    if (!problem) {
        showError('问题不存在');
        return;
    }
    
    // 创建弹窗HTML
    const modalHTML = `
        <div class="modal fade" id="problemDetailModal" tabindex="-1" aria-labelledby="problemDetailModalLabel">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="problemDetailModalLabel">
                            <i class="fas fa-question-circle me-2"></i>问题详情
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <h6 class="text-primary">问题信息</h6>
                                <table class="table table-sm">
                                    <tr>
                                        <td class="fw-bold">问题描述：</td>
                                        <td>${escapeHtml(problem.description)}</td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">问题类型：</td>
                                        <td><span class="badge bg-primary">${escapeHtml(problem.problem_type || 'unknown')}</span></td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">创建时间：</td>
                                        <td>${new Date(problem.created_at).toLocaleString()}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-primary">输入输出格式</h6>
                                <div class="row">
                                    <div class="col-6">
                                        <h6 class="text-success">输入格式</h6>
                                        <div class="border rounded p-2 bg-light">
                                            <pre class="mb-0 small">${JSON.stringify(problem.input_format || {}, null, 2)}</pre>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <h6 class="text-success">输出格式</h6>
                                        <div class="border rounded p-2 bg-light">
                                            <pre class="mb-0 small">${JSON.stringify(problem.output_format || {}, null, 2)}</pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <h6 class="text-primary">测试用例列表</h6>
                                <div id="testCasesInModal">
                                    <div class="text-center py-3">
                                        <i class="fas fa-spinner fa-spin text-primary"></i>
                                        <p class="text-muted mt-2">正在加载测试用例...</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" onclick="closeModal()">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // 移除已存在的弹窗
    const existingModal = document.getElementById('problemDetailModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // 添加新弹窗到页面
    document.body.insertAdjacentHTML('beforeend', modalHTML);
    
    // 显示弹窗 - 直接使用降级方案，不依赖Bootstrap
    const modalElement = document.getElementById('problemDetailModal');
    showModalFallback(modalElement);
    
    // 加载测试用例
    loadTestCasesForProblem(problemId);
    
    // 弹窗关闭后移除DOM元素
    modalElement.addEventListener('hidden.bs.modal', function() {
        this.remove();
        // 清理背景遮罩
        const backdrop = document.getElementById('modalBackdrop');
        if (backdrop) {
            backdrop.remove();
        }
        document.body.classList.remove('modal-open');
    });
    
    // 添加手动关闭功能
    modalElement.addEventListener('click', function(e) {
        if (e.target === this || e.target.classList.contains('btn-close')) {
            closeModal();
        }
    });
    
// 显示模态框的降级方案
function showModalFallback(modalElement) {
    modalElement.style.display = 'block';
    modalElement.style.position = 'fixed';
    modalElement.style.top = '0';
    modalElement.style.left = '0';
    modalElement.style.width = '100%';
    modalElement.style.height = '100%';
    modalElement.style.zIndex = '1055';
    modalElement.style.backgroundColor = 'transparent'; // 模态框本身透明
    modalElement.style.overflow = 'auto'; // 允许模态框内容滚动
    modalElement.classList.add('show');
    
    // 锁定背景页面滚动
    document.body.style.overflow = 'hidden';
    document.body.classList.add('modal-open');
    
    // 添加背景遮罩
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    backdrop.id = 'modalBackdrop';
    backdrop.style.position = 'fixed';
    backdrop.style.top = '0';
    backdrop.style.left = '0';
    backdrop.style.width = '100%';
    backdrop.style.height = '100%';
    backdrop.style.zIndex = '1050';
    backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // 只有背景遮罩有透明度
    backdrop.style.overflow = 'hidden'; // 防止背景遮罩滚动
    document.body.appendChild(backdrop);
    
    // 确保模态框内容居中显示
    const modalDialog = modalElement.querySelector('.modal-dialog');
    if (modalDialog) {
        modalDialog.style.margin = '1.75rem auto';
        modalDialog.style.maxWidth = '90%';
        modalDialog.style.position = 'relative';
        modalDialog.style.zIndex = '1056';
        modalDialog.style.backgroundColor = 'white'; // 确保模态框内容不透明
        modalDialog.style.maxHeight = '90vh'; // 限制最大高度
        modalDialog.style.overflow = 'auto'; // 允许内容滚动
    }
}


// 加载问题的测试用例
async function loadTestCasesForProblem(problemId) {
    try {
        const response = await fetch(`/api/test-cases?problem_id=${problemId}&created_by=teacher&limit=100`);
        const data = await response.json();
        
        const container = document.getElementById('testCasesInModal');
        
        if (data.success && data.test_cases && data.test_cases.length > 0) {
            const testCases = data.test_cases;
            
            let tableHTML = `
                <div class="table-responsive" data-problem-id="${problemId}">
                    <table class="table table-sm table-hover">
                        <thead class="table-light">
                            <tr>
                                <th width="100">测试类型</th>
                                <th width="200">输入数据</th>
                                <th width="200">预期输出</th>
                                <th width="100">难度</th>
                                <th width="120">操作</th>
                            </tr>
                        </thead>
                        <tbody>
            `;
            
            testCases.forEach(testCase => {
                tableHTML += `
                    <tr>
                        <td>
                            <span class="badge bg-secondary">${escapeHtml(testCase.test_type)}</span>
                        </td>
                        <td>
                            <div class="text-truncate" style="max-width: 180px;" title="${JSON.stringify(testCase.input_data)}">
                                ${JSON.stringify(testCase.input_data)}
                            </div>
                        </td>
                        <td>
                            <div class="text-truncate" style="max-width: 180px;" title="${JSON.stringify(testCase.expected_output)}">
                                ${JSON.stringify(testCase.expected_output)}
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-info">${escapeHtml(testCase.difficulty)}</span>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-primary" onclick="editTestCaseInModal(${testCase.id})" title="编辑">
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                                <button class="btn btn-outline-danger" onclick="deleteTestCaseInModal(${testCase.id}, ${problemId})" title="删除">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });
            
            tableHTML += `
                        </tbody>
                    </table>
                </div>
            `;
            
            container.innerHTML = tableHTML;
        } else {
            container.innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-inbox text-muted"></i>
                    <p class="text-muted mt-2">该问题暂无测试用例</p>
                    <button class="btn btn-primary mt-3" onclick="createTestCaseForProblem(${problemId})">
                        <i class="fas fa-plus me-2"></i>新建测试用例
                    </button>
                </div>
            `;
        }
    } catch (error) {
        console.error('加载测试用例失败:', error);
        document.getElementById('testCasesInModal').innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-exclamation-triangle text-warning"></i>
                <p class="text-muted mt-2">加载测试用例失败</p>
            </div>
        `;
    }
}

// 更新选中的测试用例
function updateSelectedTestCases() {
    selectedTestCaseIds = Array.from(document.querySelectorAll('.test-case-checkbox:checked'))
        .map(checkbox => parseInt(checkbox.value));
    
    // 更新按钮状态
    const deleteSelectedBtn = document.getElementById('deleteSelected');
    deleteSelectedBtn.disabled = selectedTestCaseIds.length === 0;
}

// 全选/取消全选
function selectAllTestCases() {
    const checkboxes = document.querySelectorAll('.test-case-checkbox');
    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = !allChecked;
    });
    
    updateSelectedTestCases();
    
    const selectAllBtn = document.getElementById('selectAll');
    selectAllBtn.innerHTML = allChecked ? 
        '<i class="fas fa-check-square me-1"></i>全选' : 
        '<i class="fas fa-square me-1"></i>取消全选';
}

// 保存当前生成的测试用例



// ==================== API调用和数据操作 ====================

/**
 * 创建新测试用例
 * 
 * 跳转到新建测试用例页面。
 * 这是创建测试用例的入口点。
 */
function createNewTestCase() {
    window.location.href = '/new-test-case';
}

/**
 * 创建测试用例
 * 
 * 通过API创建新的测试用例。
 * 包含完整的错误处理和用户反馈。
 * 
 * @param {Object} testCaseData - 测试用例数据
 * @param {string} testCaseData.title - 测试用例标题
 * @param {string} testCaseData.description - 测试用例描述
 * @param {string} testCaseData.problem_type - 问题类型
 * @param {string} testCaseData.test_type - 测试类型
 * @param {*} testCaseData.input_data - 输入数据
 * @param {*} testCaseData.expected_output - 预期输出
 */
async function createTestCase(testCaseData) {
    try {
        const response = await fetch('/api/test-cases', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                ...testCaseData,
                created_by: 'teacher',
                difficulty: 'medium'
            })
        });

        const data = await response.json();
        
        if (data.success) {
            showSuccess('测试用例创建成功！');
            loadProblemLibrary();
            updateStats();
        } else {
            showError('创建失败: ' + data.error);
        }
    } catch (error) {
        showError('请求失败: ' + error.message);
    }
}

/**
 * 更新测试用例
 * 
 * 通过API更新现有的测试用例。
 * 支持部分字段更新。
 * 
 * @param {number} testCaseId - 测试用例ID
 * @param {Object} updates - 要更新的字段
 */
async function updateTestCase(testCaseId, updates) {
    try {
        const response = await fetch(`/api/test-cases/${testCaseId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(updates)
        });

        const data = await response.json();
        
        if (data.success) {
            showSuccess('测试用例更新成功！');
            loadProblemLibrary();
        } else {
            showError('更新失败: ' + data.error);
        }
    } catch (error) {
        showError('请求失败: ' + error.message);
    }
}

/**
 * 删除测试用例
 * 
 * 通过API删除指定的测试用例。
 * 包含确认对话框和错误处理。
 * 
 * @param {number} testCaseId - 要删除的测试用例ID
 */
async function deleteTestCase(testCaseId) {
    if (!confirm('确定要删除这个测试用例吗？')) return;

    try {
        const response = await fetch(`/api/test-cases/${testCaseId}`, {
            method: 'DELETE'
        });

        const data = await response.json();
        
        if (data.success) {
            showSuccess('测试用例删除成功！');
            loadProblemLibrary();
            updateStats();
        } else {
            showError('删除失败: ' + data.error);
        }
    } catch (error) {
        showError('请求失败: ' + error.message);
    }
}

/**
 * 删除问题
 * 
 * 通过API删除指定的问题及其所有测试用例。
 * 这是一个级联删除操作。
 * 
 * @param {number} problemId - 要删除的问题ID
 */
async function deleteProblem(problemId) {
    if (!confirm('确定要删除这个问题吗？这将同时删除该问题的所有测试用例！')) return;

    try {
        const response = await fetch(`/api/problems/${problemId}`, {
            method: 'DELETE'
        });

        const data = await response.json();
        
        if (data.success) {
            showSuccess('问题删除成功！');
            // 重新加载问题库，并在加载完成后更新统计信息
            await loadProblemLibrary();
            updateStats(); // 更新统计信息
        } else {
            showError('删除失败: ' + data.error);
        }
    } catch (error) {
        console.error('删除问题失败:', error);
        showError('删除问题失败: ' + error.message);
    }
}

/**
 * 删除选中的测试用例
 * 
 * 批量删除用户选中的测试用例。
 * 使用并行请求提高删除效率。
 */
async function deleteSelectedTestCases() {
    if (selectedTestCaseIds.length === 0) {
        alert('请先选择要删除的测试用例');
        return;
    }

    if (!confirm(`确定要删除选中的 ${selectedTestCaseIds.length} 个测试用例吗？`)) return;

    try {
        const promises = selectedTestCaseIds.map(id => 
            fetch(`/api/test-cases/${id}`, { method: 'DELETE' })
        );
        
        const responses = await Promise.all(promises);
        const results = await Promise.all(responses.map(r => r.json()));
        
        const successCount = results.filter(r => r.success).length;
        showSuccess(`成功删除 ${successCount} 个测试用例`);
        
        loadProblemLibrary();
        updateStats();
    } catch (error) {
        showError('批量删除失败: ' + error.message);
    }
}

// 筛选测试用例
async function filterTestCases() {
    const problemType = document.getElementById('filterProblemType').value;
    const testType = document.getElementById('filterTestType').value;
    const difficulty = document.getElementById('filterDifficulty').value;
    
    try {
        let url = '/api/test-cases?created_by=teacher';
        if (problemType) url += `&problem_type=${problemType}`;
        if (testType) url += `&test_type=${testType}`;
        
        const response = await fetch(url);
        const data = await response.json();
        
        if (data.success) {
            let filteredCases = data.test_cases;
            
            // 客户端筛选难度
            if (difficulty) {
                filteredCases = filteredCases.filter(tc => tc.difficulty === difficulty);
            }
            
            testCaseLibrary = filteredCases;
            displayProblemLibrary();
        } else {
            showError('筛选失败: ' + data.error);
        }
    } catch (error) {
        showError('请求失败: ' + error.message);
    }
}



// 复用测试用例
function reuseTestCase() {
    if (selectedTestCaseIds.length === 0) {
        alert('请先选择要复用的测试用例');
        return;
    }

    const selectedCases = testCaseLibrary.filter(tc => selectedTestCaseIds.includes(tc.id));
    const problemTypes = [...new Set(selectedCases.map(tc => tc.problem_type))];
    
    if (problemTypes.length > 1) {
        alert('选中的测试用例包含多种问题类型，请选择相同类型的测试用例');
        return;
    }

    // 将选中的测试用例数据存储到sessionStorage，供主页面使用
    sessionStorage.setItem('reuseTestCases', JSON.stringify(selectedCases));
    alert('测试用例已准备好复用，请返回主页面使用');
}

// 导入测试用例
function importTestCases() {
    alert('导入功能开发中...');
}

// 在模态框中保存测试用例
async function saveTestCaseInModal(testCaseId) {
    const editRow = document.getElementById(`editRow${testCaseId}`);
    const formData = {
        test_type: editRow.cells[0].querySelector('select').value,
        input_data: editRow.cells[1].querySelector('input').value,
        expected_output: editRow.cells[2].querySelector('input').value,
        difficulty: editRow.cells[3].querySelector('select').value
    };
    
    try {
        const response = await fetch(`/api/test-cases/${testCaseId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData)
        });
        
        const data = await response.json();
        
        if (data.success) {
            showSuccess('测试用例更新成功');
            // 重新加载测试用例列表
            const problemId = document.querySelector('[data-problem-id]')?.getAttribute('data-problem-id');
            if (problemId) {
                loadTestCasesForProblem(problemId);
            }
        } else {
            showError('更新失败: ' + data.error);
        }
    } catch (error) {
        showError('请求失败: ' + error.message);
    }
}


// 取消编辑测试用例
function cancelEditTestCaseInModal(testCaseId) {
    // 重新加载测试用例列表
    const problemId = document.querySelector('[data-problem-id]')?.getAttribute('data-problem-id');
    if (problemId) {
        loadTestCasesForProblem(problemId);
    }
}

// 在模态框中删除测试用例
async function deleteTestCaseInModal(testCaseId, problemId) {
    if (!confirm('确定要删除这个测试用例吗？')) {
        return;
    }
    
    try {
        const response = await fetch(`/api/test-cases/${testCaseId}`, {
            method: 'DELETE'
        });
        
        const data = await response.json();
        
        if (data.success) {
            showSuccess('测试用例删除成功');
            // 重新加载测试用例列表
            loadTestCasesForProblem(problemId);
        } else {
            showError('删除失败: ' + data.error);
        }
    } catch (error) {
        showError('请求失败: ' + error.message);
    }
}

}
